<template>
<div class="card-password-add views-container">
    <div class="wlm-form">
        <div class="wlm-form-header">基础信息</div>
        <div class="wlm-form-content">
            <el-form ref="active" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="144px" class="retail-form" label-position="right">
                <el-form-item label="卡密库名称" prop="kammi_title">
                    <el-input :maxlength="40" v-model.trim="formFormatData.formData.kammi_title">
                    </el-input>
                </el-form-item>
                <el-form-item label="卡密库类型">
                    <el-radio-group  :disabled="isFormEdit" v-model="formFormatData.formData.kammi_class">
                        <el-radio :label="1">卡密</el-radio>
                        <el-radio :label="2">串码</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="关联商品" v-if="formFormatData.formData.kammi_class==2" prop="goods">
                    <choose-goods ref="chooseGoods" :config="chooseGoodsConfig" :changeEvt="filtersChange"></choose-goods>
                    <el-button v-if="formFormatData.formData.goods==''"  type="primary" @click="goodsToogle">请选择核销商品</el-button>
                    <div class="form-help" style="margin-bottom:10px">关联商品仅限核销商品</div>
                    <el-table v-if="formFormatData.formData.goods!=''" :data="formFormatData.formData.goods" style="width: 40%">
                        <el-table-column prop="date" label="商品">
                            <template slot-scope="scope">
                                <div class="flex-row">
                                    <img class="logo" v-if="scope.row.image" :src="scope.row.image">
                                    <div class="inner-text">
                                        <p>{{scope.row.goods_name}}</p>
                                        <span>￥:{{scope.row.goods_price}}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作"  min-width="50">
                            <template slot-scope="scope">
                                <div class="operation-group">
                                    <el-button class="wlm-text" type="text" @click="deleteGoodsTable(scope)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <el-form-item v-if="formFormatData.formData.kammi_class==2" label="结算价格">
                    <el-input placeholder="请输入结算价格" :disabled="isFormEdit" v-model.trim="formFormatData.formData.settle_price">
                    </el-input>
                </el-form-item>
                <el-form-item  v-if="formFormatData.formData.kammi_class==1" label="使用说明">
                    <ueditor :ueditorChange="serverInfoChange" :ueditorList="ueditorList" :bindIndex="1" :defaultMsg='defaultMsg' :config='{initialFrameWidth: null,initialFrameHeight: 350}' ref="by_know"></ueditor>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="wlm-form" v-if="formFormatData.formData.kammi_class==1">
        <div class="wlm-form-header flex-row"><span>卡密数据结构设置</span>
            <p style="margin-left:10px;font-size:12px;color:rgb(153, 153, 153);">创建后不可更改</p>
        </div>
        <div class="wlm-form-content">
            <div class="big-warning flex-row" style="margin-top:0;">
                <p>提示：</p>
                <div class="flex-col">
                    <p>若出售的电子卡密仅有一条数据组成，例如“激活码”，则此处只需设置1条字段，显示名称为“激活码”即可，此后在此卡密库中录入激活码一种数据；</p>
                    <p>若出售的电子卡密由多条数据组成，例如“账号”“密码”“邮箱”，则此处需要设置3条字段，显示名字逐一写入“账号”“密码”“邮箱”，此后录入数据时，则需要由这3种数据共同组成一条虚拟卡密。</p>
                </div>
            </div>
            <el-form ref="info" :disabled="isFormEdit" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="120px" class="retail-form" label-position="right">
                <el-form-item label="数据排重">
                    <el-radio-group v-model="formFormatData.formData.kammi_is_repeat">
                        <el-radio :label="1">打开</el-radio>
                        <el-radio :label="2">关闭</el-radio>
                    </el-radio-group>
                    <el-popover placement="top" title="排重说明" width="430" trigger="hover">
                        <div class="font-12" style="padding-top:8px;border-top:1px solid #f2f2f2">
                            <p>①开启后，每次向卡密库添加新数据时，若新数据与已存在的数据重复，则无法添加。</p>
                            <p>②当卡密数据由多个字段组成时，所有字段均重复才视为此条数据为重复数据，例如：</p>
                            <p>【账号：123】【密码：abc】【邮箱：qq】已有数据；</p>
                            <p>【账号：123】【密码：abc】【邮箱：yy】可正常添加，</p>
                            <p>【账号：123】【密码：abc】【邮箱：qq】不可添加，视为重复数据。</p>
                        </div>
                        <el-button type="text" slot="reference" style="margin-left:20px;">排重说明 <i class="el-icon-question"></i></el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item label="">
                    <el-table :data="formFormatData.formData.kammi_field" style="width: 50%">
                        <el-table-column prop="date" label="字段" min-width="40">
                            <template slot-scope="scope">
                                <span>字段{{scope.$index+1}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="date" label="显示名称（最长20字）">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.name" maxlength="20"></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" >
                            <template slot-scope="scope">
                                <div class="operation-group">
                                    <el-button class="wlm-text" type="text" @click="deleteTable(scope)">删除</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-button v-if="!isFormEdit" type="primary" style="margin-top:10px;" size="small" @click="addField"><i class="el-icon-plus"></i>新增一个字段</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="saveForm" type="primary" :loading="loading">保存</el-button>
        <router-link tag="span" to="/application/cardPassword">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import {
  kammiAddEdit,
  kammiDetail
} from '@/api/application'
import mixins from '@/mixins/mixins'
import ChooseGoods from '@/components/ChooseGoods/index'
import ueditor from '@/components/Ueditor/index'
export default {
  mixins: [mixins.getters('Form')],
  name: 'CardPasswordAdd',
  components: {
    ueditor,
    ChooseGoods
  },
  computed: {
  },
  data() {
    var checkGoods = (rule, value, callback) => {
      const { message } = rule
      const goods = this.formFormatData.formData.goods
      if (Array.isArray(goods) && goods.length === 0) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      defaultMsg: '',
      ueditorList: [],
      chooseGoodsConfig: {
        type: ['chooseGoods'],
        model: 'normal',
        concatenation: 'concatenation',
        disabled: [{
          label: 'status',
          value: 20
        }],
        params: {
          type: 10
        },
        unique: true,
        initList: []
      },
      formFormatData: {
        key: ['active', 'info'],
        api: {
          editForm: {
            api: kammiDetail,
            params: {
              id: ''
            },
            filters: {
              choose: {
                bindInit: ['chooseGoodsConfig']
              }
            },
            redirect: 'kammi_id'
          },
          submitForm: kammiAddEdit
        },
        formData: {
          kammi_class: 1,
          kammi_title: '',
          kammi_explain: '',
          settle_price: '',
          kammi_is_repeat: 1,
          kammi_field: [],
          goods: []
        },
        rules: {
          kammi_title: [{
            message: '请填写卡密库名称',
            required: true,
            trigger: 'change'
          }],
          goods: [{
            message: '请选择活动商品',
            required: true,
            validator: checkGoods,
            trigger: 'change'
          }]
        }
      }
    }
  },
  created() {

  },
  methods: {
    saveForm() {
      // if (this.formFormatData.formData.kammi_field.length > 0 && this.formFormatData.formData.kammi_class === '1') {
      this.formFormatData.formData.kammi_explain = this.defaultMsg
      this.formFormatSubmit({ router: { type: 'replace', path: '/application/cardPassword', code: 1 } })
      // } else {
      //   this.$message({
      //     message: '请添加卡密',
      //     type: 'warning'
      //   })
      // }
    },
    serverInfoChange(msg) {
      this.defaultMsg = msg
    },
    formFormatCallBack(data, type, response) {
      if (type === 'editForm') {
        const { kammi_explain } = data
        this.defaultMsg = kammi_explain
      }
    },
    deleteTable(scope) {
      this.formFormatData.formData.kammi_field.splice(scope.$index, 1)
    },
    filtersChange(val) {
      this.currentRow = val.currentRow
      const displayData = val.displayData
      const result = []
      displayData.map(item => {
        console.log(this.formFormatData.formData.goods)
        result.push({ image: item.image[0]['file_path'], goods_name: item.goods_name, goods_id: item.goods_id, goods_price: item.goods_min_price })
        console.log(this.formFormatData.formData.goods)
      })

      this.formFormatData.formData.goods = [result[result.length - 1]]
    },
    goodsToogle() {
      const result = []
      this.formFormatData.formData.goods.map(item => {
        result.push(item.goods_id)
      })
      this.$refs.chooseGoods.currentRow = result
      this.$refs.chooseGoods.toggle()
    },
    deleteGoodsTable(scope) {
      this.formFormatData.formData.goods.splice(scope.$index, 1)
      this.currentRow.splice(scope.$index, 1)
    },
    addField() {
      const length = this.formFormatData.formData.kammi_field.length
      this.formFormatData.formData.kammi_field.push({ value: length, name: '' })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-password-add {}
</style>
